<template>
  <div class="bar" ref="stageLearn"></div>
</template>

<script>
import { getRateData } from "api/interface";
import * as echarts from "echarts";
export default {
  name: "Stage",
  mounted() {
    this.$nextTick(function () {
      //阶段学习情况
      let stageCharts = echarts.init(this.$refs.stageLearn);
      //折线图选项
      let stageChartsOption = {
        legend: {
          left: "85%",
          top: "bottom",
        },
        xAxis: {
          //x轴
          type: "category",
          data: [],
          show: false,
        },
        yAxis: {
          type: "value",
          show: false, //是否隐藏坐标轴
        },
        color: ["#525288"],
        label: {
          //提示内容
          show: true,
          formatter: "{b}:{c}%", //格式化内容
        },
        series: [],
      };
      stageCharts.setOption(stageChartsOption);
      this.$emit("resize", stageCharts);
      //折线图异步请求
      getRateData().then((res) => {
        let data = res.data?.data || [];

        let sxData = data.reduce(
          (pre, cur) => {
            pre[1].push(cur.name);
            pre[0].push(cur.rate);
            return pre;
          },
          [[], []]
        );

        stageCharts.setOption({
          xAxis: {
            data: sxData[1],
          },
          series: [
            {
              name: "学习效率",
              data: sxData[0],
              type: "line",
              smooth: true, //是否开启平衡曲线
            },
          ],
        });
      });
    });
  },
};
</script>

<style>
.bar {
  height: 100%;
  width: 100%;
}
</style>